<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="drag-layout.css?t=20171025">
    <script src="jquery-3.2.1.min.js" ></script>
</head>
<body>
<button onclick="init()"> init </button>
<button onclick="refresh()"> refresh </button>
<button onclick="layout()"> layout </button>
<section id="drag-layout-container" style="margin: 0">
    <div class="container">
        <div class="grid" style="margin: 0;border: none">
            <div style="clear: both"></div>
        </div>
    </div>
</section>



</body>
<script src="velocity.min.js" ></script>
<script src="hammer.min.js" ></script>
<script src="muuri.js" ></script>
<script src="drag-layout.js" ></script>
<script>
    var aaa = null;
    var item = {urlModules:[{
        id:0,
        order:0,
        type:0,
        title:'模块名称0',
        url:'http://localhost:8100',
        hideTitle:true,
        titleStyle:{
            background:'#000',
            color:'#fff',
            borderRadius: '50px'
        },
        width:'80%',
        height:'300px'
    },{
        id:0,
        order:0,
        type:0,
        title:'模块名称0',
        url:'http://localhost:8100',
        hideTitle:false,
        titleStyle:{
            background:'#000',
            color:'#fff'
        },
        width:'80%',
        height:'300px'
    }
    ]}
    function refresh() {
        aaa.destroy();
//        aaa.refresh()
//        aaa.layout()

    }
    function init() {
        var item = {urlModules:[{
            id:0,
            order:0,
            type:0,
            title:'模块名称0',
            url:'http://localhost:8100',
            hideTitle:true,
            width:'80%',
            height:'300px'
        }
        ]}
        aaa = $("#drag-layout-container").dragLayout(item);
        aaa.init();
    }
    aaa = $("#drag-layout-container").dragLayout(item);
    aaa.init();
</script>

</html>